<!DOCTYPE html>
<html lang="zh">
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link type="image/x-icon" href="../static/sysimg/favicon.ico" rel="shortcut icon"/>
    <!--引入bootstrap样式表-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
    <!--引入bootstrap-icons样式表-->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css"
          rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="m-3 text-center">
        <h3>Table</h3>
    </div>
    <hr/>
    <div class="my-3">
        <table class="table table-striped table-hover table-bordered" id="altList">
        </table>
    </div>

</div>

<!--引入jquery-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--引入bootstrap，依赖jquery，需要放在jquery后-->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>

<!--自由脚本-->
<script>
    const baseUrl = 'https://svom-gwacn.cn/alertCenter' // RootURL

    function getAlerts(triName = null) {
        const api = '/alertApi/getAlerts?triggerName=' + (triName || '');
        return new Promise((resolve, reject) => {
            $.ajax({
                url: baseUrl + api
                , type: 'POST' // 请求类型
                , data: JSON.stringify({
                    flag: 0,
                    start: 0,
                    length: 10,
                    orderNames: [],
                    orderTypes: []
                }) // 请求时携带的数据
                , contentType: 'application/json' // 定义请求数据的类型
                , success: function (rst, status, xhr) {
                    if (rst.errCode === 0) {
                        resolve(rst.data.list);
                    } else {
                        alert(rst.msg);
                        reject(rst.msg);
                    }
                }
                , error: function (xhr, status, error) {
                    alert('Request Error: ' + error);
                    reject(error);
                }
            })
        });
    }

    function renderAlerts(alts) {
        // console.log(alts);
        if (alts && alts.length > 0) {
            const ulDom = $('#altList')
            ulDom.empty();
            const tabHeader = '<tr><th>ID</th><th>Trigger</th><th>Packet Type</th></tr>'
            ulDom.append(tabHeader);
            alts.forEach((v) => {
                let line = '';
                line += '<tr>';
                line += '<td>' + v.alertId + '</td>';
                line += '<td>' + v.triggerName + '</td>';
                line += '<td>' + v.alertPacketTypeName + '</td>';
                line += '</tr>';
                ulDom.append(line);
            })
        }
    }

    $(document).ready(function () {
        getAlerts().then(function (res) {
            renderAlerts(res);
        });
    });
</script>
</body>
</html>